/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

page{
  background-color: #f7f7f7;
  color: #555;
}
/* pages/list/list.wxss */

.fix-header{
  /*
  position: fixed;
  width: 100%; 
  */
  background-color: #0077fe;
  color: #fff;
  box-sizing: border-box;
  .topTitle{
    font-weight: bold;
    padding: 10px 15px;
  }
}

.search-bar{
  display: flex;
  align-items: center;
  padding: 10px;
  .iconImg{
    width: 40px;
    height: 40px;
    image{
      width:100%;
      height: 100%;
    }
  }
  .search-input{
    flex: 1;
    padding: 0 10px;
    input{
      background-color: #fff;
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
      border-radius: 20px;
      color: #555;
    }
  }
}
.swiper{
  .swiper-img{
    width: 100%;
    image{
      width: 100%;
    }
  }
}
.top-filter{
  margin-bottom: 15px;
  background-color: #f7f7f7;
  color: #444;
  .items{
    display: flex;
    .item{
      flex: 1;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }
    .item:active{
      color: #0077fe;
    }
    .item.active{
      color: #0077fe;
      border-bottom: 2px solid #0077fe;
    }
  }
} 
.sec{
  margin-bottom: 15px;
  .sec-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:15px;
    .sec-title{
      font-weight: bold;
      border-left: 3px solid #0077fe ;
      padding-left: 15px;
    }
    .sec-tools{
      display: flex;
      align-items: center;
      .item{
        padding: 0 10px;
        color: #0077fe;
      }
      .item:active{
        color: #222;
      }
    }
  }
}
.list-pannel-1{
  display: grid;
  grid-template-columns: auto auto auto auto  ;
  grid-gap: 10px;
  box-sizing: border-box;
  padding: 0 15px;
  .item{
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;
    padding: 15px 0;
    border-radius: 5px;
    border:1px solid #e0e0e0;
    image{
      width:24px ; height: 24px;
    }
    .caption{ 
      font-size: 0.9em;
      color: #0077fe;
    } 
  }
  .item:active{
    background-color: #a5c9f1;
  }
}
.list-pannel-2{
  display: grid;
  grid-template-columns: auto auto  ;
  grid-gap: 10px;
  box-sizing: border-box;
  padding: 0 15px;
  .item{
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;
    padding: 15px 0;
    border-radius: 5px; 
    display: flex;
    justify-content: space-around;
    image{
      width:24px ; height: 24px; padding: 10px; border:1px solid #0077fe; border-radius: 50%;
    }
    .titles{
      text-align: right;
      .caption{ 
        font-weight: bold;
        color: #0077fe;
        padding-bottom: 5px;
      } 
      .desc{ 
        font-size: 0.9em; 
        color: #888;
      } 
    }
  }
  .item:active{
    background-color: #a5c9f1;
  }
}
.list-pannel-3{
  background-color: #fff; 
  .item{
    box-sizing: border-box;
    background-color: #fff; 
    padding: 15px 15px; 
    display: flex; 
    border-bottom: 1px solid #f0f0f0;
    image.listIcon{
      width:96px ; height: 84px; padding: 3px; border:1px solid #eee;  border-radius: 5px;
    }
    .titles{
      flex: 1;
      padding-left: 10px;
      text-align: right;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;
      .caption{ 
        font-weight: bold;
        color: #0077fe; 
      } 
      .desc{ 
        font-size: 0.9em; 
        color: #888;
      } 
      .data{
        display: flex;
        font-size: 0.9em;
        align-items: center;
        .data-item{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .lab{
            padding-right: 10px;
          }
        }
        .data-item:first-child{ 
          justify-content: flex-start;  
        }
        .data-item:last-child{
          justify-content: flex-end;  
        }
      }
    }
  }
  .item:active{
    background-color: #a5c9f1;
  }
  .item:last-child{
    border: 0;
  }
}
.info-pannel{
  padding:0 15px ;
  .info-items{
    background-color: #fff;
    border-radius: 8px;
    .info-item{
      display: flex;
      align-items: center;
      image.rowIcon{
        padding:15px;
        width: 20px ;
        height: 20px;
      }
      .titles{
        flex: 1;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        justify-content: space-between;
        padding-right: 15px;
        
        .lab{
          height: 50px;
          line-height: 50px;
          color: #777;
        }
        image.rightIcon{ 
          padding-left: 10px;
          width: 20px ;
          height: 20px;
        }
        .value{
          flex:1;
          text-align: right;
          font-weight: bold;
        }
      }
      image{
        width: 20px ;
        height: 20px;;
      }
    }
    .info-item:last-child .titles{
      border: 0;
    }
    .info-item.link:active{
      background-color: #f9f9f9;
    }
  }
} 
.info-pannel-col4{
  padding:0 15px ;
  .info-items{
    background-color: #fff;
    border-radius: 8px; 
    padding: 15px 0;
    display: flex;
    .info-item{
      flex: 1;
      text-align: center;
      .lab{
        font-size: 0.85em;
        padding-top: 5px;;
      }
      .data{
        display: flex;
        justify-content: space-evenly; 
        align-items: center;
        color: #333;
        .value{
          font-size: 1.5em;
          font-weight: bold;
        }
        .unit{
          display: flex;
          .sup{
            margin-top: -10px;
          }
        }
      }
    }
  }
}
.desc-pannel{
  padding:0 15px;
  .content{
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    border-left: 3px solid #999;
    font-size: 0.9em;
    color: #666;
  };
}
.img-top-desc{
  background-color: #fff;
  margin-bottom: 15px;
  .img-content{
    position: relative;
    image{
      width: 100%;
    }
  }
  .titles{
    padding:15px;
    .title-master{
      font-weight: bold;
    }
    .title-desc{
      padding-top: 10px;
    }
  }
}
.img-grid{
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 5px;
  grid-gap: 5px;
  background-color: #fff;;
  .img-item{
    height: 90px; 
    image{
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
  }
}

.form-edit{
  padding: 15px;
  .form-rows{
    background-color: #fff;
    border-radius: 8px;
    .item{ 
      border-bottom: 1px solid #eee;
      .placehold{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .img-icon{
          padding: 15px;
          image{
            height: 20px;
            width: 20px;
          }
        }
        .title{
          flex: 1; 
          font-weight: bold;         
        }
        .msg{
          padding-right: 15px;
          color: #da133e;
        }
      }
      .editor{
        padding: 15px;
        padding-top:0px;
        box-sizing: border-box;
        input{
          box-sizing: border-box;
          width: 100%;
          height: 36px;line-height: 36px;
          font-weight: bold;
          color: #333; 
          padding: 0 10px;
          background-color: #f0f0f0;
        }
        .picker{
          background-color: #eee;
          display: flex;
          align-items: center;
          .value{
            flex: 1;
            padding-left: 10px;
            font-weight: bold;
            color: #333;
          }
          .drop-icon{
            padding: 10px;
            image{
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
    .item:last-child{
      border:0;
    }
  }
  .form-btns{
    display: flex;
    justify-content: space-between;
    .item{
      flex: 1;
      padding:10px;
      .form-btn{
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border:1px solid #0077fe;
        border-radius: 22px;
        color: #0077fe;
        .img{
          //padding:10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          image{
            width: 18px ;
            height: 18px;
          }
        }
        .title{
          padding:0px 5px;
          height: 40px;
          line-height: 40px;
        }
      }
      .form-btn:active{
        background-color: #9dc6f5;
        color: #fff;
      }
    }
  }
}

.editForm{
  padding:10px 15px;
  .item{
    margin-bottom: 15px;
    box-sizing: border-box;
    .placeholdRow{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title{
        font-weight: bold;
      }
      .msg{
        color: #da133e;
      }
    }
    .edit{
      box-sizing: border-box;
      padding:10px 0;
      input{
        width: 100%;
        background-color: #fff;
        padding:0 15px;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}

.grids{
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  .item{
    background-color: #fff;
    text-align: center;
    padding:10px 0;
    border:1px solid #eee;
  }
  .item.active{
    background-color: #0077fe;
    color: #fff;
  }
}

.accountTop{
  background-color: #0077fe;
  color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .icon{    
    image{
      width: 80px;
      height: 80px;
      background-color: #fff;
      border-radius: 50%;
      border:5px solid #fff;
    }
  }
  .titles{
    flex: 1;
    padding-left: 10px;
    .t0{
      font-size: 1.8em;
      font-weight: bold;
      padding-bottom: 10px;
    }
    .t1{
      font-size: 1.2em;
    }
  }
}